<template>
  <a-modal title="消费账户充值" title-align="start" :footer="false" :mask-closable="false" v-model:visible="showvisible" @cancel="showvisible = false" :width="900">
    <a-space>
      <a-input-number hide-button v-model="rechargeValue" :precision="0" placeholder="请输入充值金额，只能输入整数" style="width: 250px">
        <template #prefix> ￥ </template>
      </a-input-number>
      <a-button class="gray-outline" @click="submitQuestion">提交充值请求</a-button>
    </a-space>

    <a-steps type="arrow" :current="0" class="mt10 mb10">
      <a-step>提交充值请求</a-step>
      <a-step>
        <div style="font-size: 12px">
          <div class="step-item">充值转账至对工账户，并提交已转账</div>
          <div class="step-item">卡号：3456789045678</div>
          <div class="step-item">支行：123</div>
          <div class="step-item">名称：123</div>
        </div>
      </a-step>
      <a-step>2小时内充值到账</a-step>
    </a-steps>

    <ul class="tab-box">
      <li :class="[curIndex == index ? 'active' : '', 'cursor']" v-for="(item, index) of tabList" :key="item" @click="tabClick(index)">{{ item }}</li>
    </ul>

    <a-table size="mini" class="table-two-line mt10" :footer="false" :data="dataList" @sorter-change="sortChange" :loading="loading" :pagination="false" :scroll="{ y: 400 }">
      <template #columns>
        <a-table-column title="提交时间" #cell="{ record, rowIndex }" :width="100" data-index="gmtCreate" :sortable="{ sortDirections: ['ascend', 'descend'] }">
          {{ $setTime(record.gmtCreate) }}
        </a-table-column>
        <a-table-column title="充值金额" #cell="{ record, rowIndex }" :width="80" data-index="amount" :sortable="{ sortDirections: ['ascend', 'descend'] }"> ￥{{ record.amount }} </a-table-column>
        <a-table-column title="提交人" #cell="{ record, rowIndex }" :width="80">
          {{ record.createUname }}
        </a-table-column>
        <a-table-column title="附件" #cell="{ record, rowIndex }" :width="140">
          <a-upload class="fl" style="width: 160px" :disabled="curIndex != 0" list-type="picture-card" action="/" v-model:file-list="record.attachmentUrlList" :on-before-remove="(file) => removeItem(file, record)" :on-before-upload="(file) => beforeUplaod(file, record)" />
        </a-table-column>
        <a-table-column title="单据号" #cell="{ record, rowIndex }" :width="80">
          {{ record.docNumber }}
        </a-table-column>
        <a-table-column title="操作" #cell="{ record, rowIndex }" :width="60" v-if="curIndex == 0">
          <a-button type="text" class="mr10" @click="confirm(record)">已转账</a-button>
          <a-button type="text" style="color: red" @click="del(record)">删除</a-button>
        </a-table-column>
      </template>
    </a-table>
    <div class="pagination-footer" style="margin: 10px 0 0">
      <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { computed, ref, onMounted } from 'vue'
  import { Message, Modal } from '@arco-design/web-vue'
  import { submitDepositRequest, findCompanyDepositRequestPage, addInformation, cancelDepositRequest, confirmDepositRequest } from '@/api/finance/wallet'
  import { uploadFile } from '@/api/base'
  import _ from 'lodash-es'

  let props = defineProps(['modelValue', 'accountInfo'])
  let emits = defineEmits(['update:modelValue', 'save'])
  let fileList: any = ref([])
  let dataList = ref([{}])
  let loading = ref(false)
  let pageNation = ref({ total: 0, pageSize: 20, pageNum: 1 })
  let searchValue: any = ref({
    sortField: 'gmtCreate',
    sortAsc: false,
  })
  let rechargeValue: any = ref({})
  let tabList = ref(['待转账', '充值中', '已完成'])
  let curIndex = ref(0)
  let statusMap = {
    0: 'PENDING',
    1: 'PROCESSING',
    2: 'COMPLETED',
  }
  let showvisible: any = computed({
    set(val) {
      emits('update:modelValue', val)
    },
    get() {
      return props.modelValue
    },
  })
  const changePage = (val: number) => {
    pageNation.value.pageNum = val
    getList()
  }

  const sizeChange = (val: number) => {
    pageNation.value.pageNum = 1
    pageNation.value.pageSize = val
    getList()
  }
  const sortChange = (item: any, extra: any) => {
    if (extra) {
      searchValue.value.sortField = item
      searchValue.value.sortAsc = extra == 'ascend' ? true : false
    } else {
      searchValue.value.sortField = ''
      searchValue.value.sortAsc = ''
    }
    getList()
  }
  const getList = async () => {
    const params = {
      ...searchValue.value,
      // accountId: `${props.accountInfo.consumeWalletAccount.id},${props.accountInfo.giftWalletAccount.id}`,
      accountId: `${props.accountInfo.consumeWalletAccount.id}`,
      status: statusMap[curIndex.value],
      pageNum: pageNation.value.pageNum,
      pageSize: pageNation.value.pageSize,
    }
    if (!params.sortField) {
      params.sortField = 'gmtCreate'
      params.sortAsc = false
    }
    loading.value = true
    const res: any = await findCompanyDepositRequestPage(params)
    if (res) {
      let list = res?.data?.records || []
      dataList.value = []
      list.forEach((e: any) => {
        if (!e.attachmentUrlList) e.attachmentUrlList = []
        let newList: any = []
        e.attachmentUrlList.forEach((item: any) => {
          newList.push({ url: item })
        })
        e.attachmentUrlList = newList
      })
      dataList.value = list
      pageNation.value.total = res?.data?.total || 0
    }
    loading.value = false
  }
  const tabClick = (index: number) => {
    curIndex.value = index
    pageNation.value.pageNum = 1
    getList()
  }
  const submitQuestion = async () => {
    if (!rechargeValue.value) return Message.error('请输入充值金额')
    const parmas = {
      accountId: props?.accountInfo?.consumeWalletAccount?.id,
      amount: rechargeValue.value,
    }
    const res: any = await submitDepositRequest(parmas)
    if (res) {
      Message.success('充值成功')
      rechargeValue.value = ''
    }
    tabClick(0)
  }

  const beforeUplaod: any = async (file: any, item: any) => {
    let type = file.type.split('/')[1]
    if (!['JPG', 'PNG', 'BMP', 'GIF', 'JPEG'].includes(type.toUpperCase())) {
      Message.error('请上传JPG/PNG/BMP/GIF/JPEG格式的图片')
      return false
    }
    if (file.size / 1024 / 1024 > 5) {
      Message.error('图片最大为5M')
      return false
    }
    let formData = new FormData()
    formData.append('file', file)
    const res: any = await uploadFile(formData)
    if (res) {
      let obj = {
        url: res.data.publicUrl,
      }
      item.attachmentUrlList.push(obj)
    }
    let params = {
      attachmentUrlList: item.attachmentUrlList.map((e: any) => e.url),
      id: item.id,
    }
    const res1: any = await addInformation(params)
    if (res1) {
      Message.success('附件上传成功')
    }
    getList()
  }

  const removeItem: any = async (file: any, item: any) => {
    let url = file.url
    let list = item.attachmentUrlList.filter((item: any) => item.url !== url)
    item.attachmentUrlList = list
    let params = {
      attachmentUrlList: item.attachmentUrlList.map((e: any) => e.url),
      id: item.id,
    }
    const res1: any = await addInformation(params)
    if (res1) {
      Message.success('附件删除成功')
    }
    getList()
  }

  const confirm = (data: any) => {
    let params = {
      id: data.id,
    }
    Modal.info({
      title: '提示',
      content: '是否已转账？',
      titleAlign: 'start',
      cancelText: '取消',
      hideCancel: false,
      onBeforeOk: async (done) => {
        const res: any = await confirmDepositRequest(params)
        if (res.code == 'SUCCESS') {
          done(true)
          Message.success('操作成功')
          getList()
        }
      },
    })
  }
  const del = (data: any) => {
    let params = {
      id: data.id,
    }
    Modal.info({
      title: '删除确认',
      content: '信息删除后无法恢复，确定要删除吗？',
      titleAlign: 'start',
      cancelText: '取消',
      hideCancel: false,
      onBeforeOk: async (done) => {
        const res: any = await cancelDepositRequest(params)
        if (res.code == 'SUCCESS') {
          done(true)
          Message.success('删除成功')
          getList()
        }
      },
    })
  }

  onMounted(() => {
    getList()
  })
</script>

<style lang="less" scoped>
  :deep(.arco-upload-picture-card) {
    min-width: 40px;
    height: 40px;
  }
  :deep(.arco-upload-list-picture) {
    width: 40px;
    height: 40px;
  }

  :deep(.arco-upload-list-picture-operation) {
    line-height: 40px;
  }

  .step-item {
    height: 14px;
    line-height: 14px;
  }

  .tab-box {
    display: flex;
    li {
      height: 30px;
      width: 60px;
      text-align: center;
      line-height: 30px;
      border: 1px solid #d7d7d7;
      border-right: none;
      &:last-child {
        border-right: 1px solid #d7d7d7;
      }
      font-size: 12px;
    }
    .active {
      background: #165dff;
      color: white;
    }
  }
</style>
